import React, { Component, PureComponent, Suspense, lazy } from 'react'
import ReactDOM from 'react-dom';

import PDFObject from 'pdfobject'

import WrapModal from '@/components/WrapModal'


class Test extends PureComponent {

  state = {
    visible: true,
    tipShow: false
  }

  pdfDomId = `pdf-view_${$g.nanoid()}`

  componentDidMount(){
    this.enbed()
  }

  enbed = (setTipShow = 0) => {
    const { src } = this.props
    if (PDFObject.supportsPDFs) {
      setTimeout(() => {
        if (src) {
          PDFObject.embed(src + '?Authorization=' + $g.getToken() + '&type=1&content-type=application/octet-stream', `#${this.pdfDomId}`)

          this.setState({ tipShow: false })
        } else {
          this.setState({ tipShow: true })
        }
      }, 10)
    } else {
      console.log('浏览器不支持pdf预览')
    }
  }

  render(){
    const { visible, tipShow } = this.state
    return  (
      <>
        <WrapModal
          title='文件预览'
          width='900px'
          centered
          fullScreen={true}
          bodyStyle={{ height: 'calc(100vh - 300px)', overflowY: 'hidden' }}
          visible={visible}
          destroyOnClose={true}
          footer={null}
          okText='保存'
          cancelText='取消'
          onCancel={() => { this.setState({ visible: false }) }}
        >
          <div id={this.pdfDomId} style={{height: '100%'}}>

          </div>
          {
            tipShow && <div style={{textAlign: 'center', color: 'red'}}>文件预览失败</div>
          }
        </WrapModal>
      </>
    )
  }

}

export default Test